<template>
  <div id="app">
      <div class="login-container">
        <div class="loginBox">
          <form method="post" class="login-form" label-position="left">
            <div class="title-container">
              <div class="logoInfo clearfix">
                <em class="logo"></em>
              </div>
            </div>
            <div>
              <span class="svg-container svg-container_login">
                <span class="username"></span>
              </span>
              <el-input v-model="data.user.username" placeholder="请输入用户名"/>
            </div>
            <div>
              <span class="svg-container">
                <span class="password"></span>
              </span>
              <el-input v-model="data.user.password" type="password" placeholder="请输入密码"/>
            </div>
            <input type="button" @click="login" style="width:100%;margin-bottom:30px;" value="登录"/>
          </form>
        </div>
      </div>
  </div>
</template>


<style scoped>
@import './css/login.css';
</style>


<!-- 引入组件库 -->
<script setup>
import { useRoute , useRouter } from 'vue-router';
import { reactive } from 'vue';
import { ElMessage , ElMessageBox } from 'element-plus'
import service from '@/util/http';
import {setToken} from '@/util/storage'

let router = useRouter();

let data = reactive({
  user:{}
});

//登录的点击事件
function login(){
  service.post("/admin/user/login" , data.user).then(response=>{
      if(response.data.flag){
        //清除sessionStorage
        sessionStorage.clear()
        //设置token
        setToken(response.data.data.token)
        router.push({path:'/main'})
      }else {
        ElMessage.error(response.data.message)
      }
  }).catch(error=>{
    ElMessage.error(error)
  })
}
</script>



